<template>
	<a-layout class="layout">
		<a-layout>
			<a-layout-header class="header">
				<!-- logo -->
				<div class="logo flx-center">
					<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
					<span class="logo-text">AS-Vue3-Admin</span>
				</div>
				<ToolBarRight />
			</a-layout-header>
			<a-layout-content>
				<a-card :bordered="false" :bodyStyle="{ padding: '15px' }" class="mb-12">
					<a-row>
						<div class="but-title">档口入口：</div>
						<a-button v-for="(item, index) in dangko" :key="index" type="link">{{ item.name }}</a-button>
					</a-row>
				</a-card>
			</a-layout-content>
		</a-layout>
	</a-layout>
</template>

<script setup lang="ts" name="layoutVertical">
import { ref, computed, reactive } from "vue";
import { useRoute } from "vue-router";
import { useGlobalStore } from "@/stores/modules/global";
import { useAuthStore } from "@/stores/modules/auth";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";

interface DataItem {
	id: string;
	name: string;
}

const route = useRoute();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
//档口入口 ： 档口1  档口2  档口3
const dangko = reactive<DataItem[]>([
	{ id: "1", name: "档口1" },
	{ id: "2", name: "档口2" },
	{ id: "3", name: "档口3" }
]);

const theme = computed(() => {
	return globalStore.styleSetting === "realDark" ? "dark" : globalStore.styleSetting;
});
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
